<template>
  <div>
    <el-carousel trigger="click" height="355px" v-if="flag">
      <el-carousel-item v-for="img in imgs" :key="img">
        <img :src="img" class="ad-v" @click="adClick('/ad')" />
        <span class="ad-v-close">
          广告
          <span @click="advClose">x</span>
        </span>
      </el-carousel-item>
    </el-carousel>
    <div class="ad-v-closed" v-if="!flag">CSDN已关闭此广告</div>
  </div>
</template>

<script lang='ts'>
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  flag: boolean = true;
  imgs: any = [
    require("~/assets/images/adv1.png"),
    require("~/assets/images/adv2.jpg")
  ];
  advClose() {
    this.flag = false;
    console.log(this.flag);
  }
  adClick(path: string) {
    this["$router"].push(path);
  }
}
</script>

<style lang='less' scoped>
.ad-v {
  height: 100%;
}
.ad-v-close {
  color: #fff;
  border: 1px solid #fff;
  border-radius: 2px;
  position: absolute;
  right: 10px;
  line-height: 18px;
  font-size: 12px;
  margin-top: 5px;
  padding-left: 5px;
  padding-right: 5px;
  span {
    cursor: pointer;
    z-index: 1;
  }
}
.ad-v-closed {
  .wh(100%, 355px);
  .flex-box(row);
  background: #f0f0f5;
}
</style>